<template>
<div style="position: relative;">
  <a-button  :style="{backgroundColor: color}" style="z-index: 1" @click="onClick">
    <template #icon>
      <icon-bg-colors />
    </template>
  </a-button>
  <input ref="picker" v-model="value" type="color" style="position: absolute; z-index: 0; left: 0; bottom: 0; width: 0; height: 0" @change="onChange">
</div>
</template>

<script>
export default {
  name: "ColorPicker",
  props: {
    color: {
      type: String,
      required: false
    }
  },
  emits: ['update:color'],
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onClick() {
      this.$refs.picker.click()
    },
    onChange() {
      this.$emit('update:color', this.value)
    }
  }
}
</script>

<style scoped>
.a {
    line-height: 1.5715;

}
</style>